<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>====
      <router-link to="/aa">aa</router-link>=====
      <router-link to="/bb">bb</router-link>

      <router-view></router-view>
      
      <hr />
      以上是坑位
      <hr />

  
      <!-- sync修饰符 -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import child from "./children";
//axios.defaults.baseURL='http://127.0.0.1:3000'
export default {
  
  data() {
    return {
      a1: "app",
      aa: ""
    };
  },
  async created() {
    //axios.get().then()

    const res = await axios("/api");
    console.log(res, 888);
  },
  watch: {
    a1(newVal, olgVal) {
      this.aa = newVal;
    },
    // "$route.path"(newVal, olgVal) {
    //   //  只要路由值发生改变  就立刻触发
    //   console.log(newVal, 999);
    // }

    "$route.path": {
      handler(newVal, olgVal) {
        console.log(newVal, 999);
      },
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
.router-link-exact-active {
  color: green;
  background-color: red;
}
</style>
